<template>
  <div class="flex justify-between mb-5">
    <h1 style="font-size: 1.2rem">
      {{ $t("客户列表") }}
    </h1>
    <el-button type="danger" @click="addCustomer">{{
      $t("添加客户")
    }}</el-button>
  </div>
  <el-card>
    <div class="flex justify-between">
      <el-form style="flex: 1" :inline="true" :model="filterForm">
        <el-form-item>
          <el-select
            v-model="filterForm.sys_review_status"
            style="width: 150px"
            clearable
            :placeholder="$t('VA-审核状态')"
            @change="filterList"
          >
            <el-option
              v-for="item in reviewStatus"
              :key="item.key"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" v-loading="loading">
      <template #empty>
        <p class="text-lg">{{ $t("还没有添加客户") }}</p>
      </template>
      <el-table-column
        prop="company_name"
        :label="$t('账户名称')"
        align="center"
        width="180"
      />
      <el-table-column
        align="center"
        prop="account_type"
        :label="$t('账户类型')"
      >
        <template #default="scope">
          {{ scope.row.account_type === 1 ? $t("企业") : $t("个人") }}
        </template>
      </el-table-column>
      <el-table-column
        prop="sys_review_status"
        :label="$t('VA-审核状态')"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="getReviewStatusName(scope.row.sys_review_status).type">
            {{ getReviewStatusName(scope.row.sys_review_status).name }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        :label="$t('VA-操作')"
        width="280"
      >
        <template #default="scope">
          <el-button
            round
            icon="MoreFilled"
            size="small"
            class="cursor-pointer"
            @click="edit(scope.row)"
            :disabled="scope.row.sys_review_status !== 2"
            >{{ $t("编辑") }}
          </el-button>
          <el-button
            round
            icon="MoreFilled"
            size="small"
            class="cursor-pointer"
            :disabled="scope.row.sys_review_status === 2"
            @click="check(scope.row)"
            >{{ $t("查看") }}
          </el-button>
          <el-button
            round
            size="small"
            class="cursor-pointer"
            :disabled="scope.row.sys_review_status !== 1"
            @click="onLookCard(scope.row)"
            >{{ $t("银行卡") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-center mt-5">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        :default-page-size="pageable.pageSize"
        :default-current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <UserDetail
    :isShowUserDetail="isShowUserDetail"
    :userId="currentId"
    @close="
      () => {
        currentId = 0;
        isShowUserDetail = false;
      }
    "
  />
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { GetVaUserList } from "@/api/VAAccount";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { useRouter, useRoute } from "vue-router";
import UserDetail from "./components/userDetail.vue";

const router = useRouter();
const route = useRoute();

const filterForm = reactive({
  sys_review_status: "",
});

const tableData = ref([]);
const loading = ref(false);
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const reviewStatus = computed(() => {
  return [
    { key: 0, name: `${t("审核中")}`, value: 0, type: "warning" },
    { key: 1, name: `${t("审核成功")}`, value: 1, type: "success" },
    { key: 2, name: `${t("审核失败")}`, value: 2, type: "danger" },
  ];
});

// 订单状态
const getReviewStatusName = (status) => {
  return reviewStatus.value.find((i) => status === i.value);
};

const filterList = () => {
  getVaUserList();
};

const getVaUserList = async () => {
  const data = { page: pageable.pageNum, pagesize: pageable.pageSize };
  const params = { ...data, ...filterForm };
  if (!params.sys_review_status && params.sys_review_status !== 0) {
    delete params.sys_review_status;
  }
  try {
    loading.value = true;
    const { list, page } = await GetVaUserList(params);
    tableData.value = list || [];
    pageable.total = page?.total_count || 0;
    loading.value = false;
  } catch {
    loading.value = false;
  }
};

const handleCurrentChange = async (number) => {
  pageable.pageNum = number;
  await getVaUserList();
};
// 条数
const handleSizeChange = (number) => {
  pageable.pageSize = number;
  getVaUserList();
};

const addCustomer = () => {
  const state = {};
  router.push({
    path: `${route.path}/addCustomer`,
    state,
  });
};
// 展示详情
const isShowUserDetail = ref(false);
const currentId = ref(0);
// 查看
const check = async (row) => {
  isShowUserDetail.value = true;
  currentId.value = row.id || 0;
};
// 编辑
const edit = (row) => {
  const state = { id: row.id };
  router.push({
    path: `${route.path}/addCustomer`,
    state,
  });
};

const onLookCard = (row) => {
  const state = { id: row.id };
  router.push({
    path: `${route.path}/bankCard`,
    state,
  });
};

onMounted(() => {
  getVaUserList();
});
</script>
